<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width = device-width,user-scalable = no">
	<title>Document</title>
	<script src="MTween.js"></script>
	<script src="mScroll.js"></script>
	<script src="getGesTure.js"></script>
	<script>
		var iScale = 1;
		iScale = iScale / window.devicePixelRatio;
		document.write('<meta name="viewport" content="width=device-width,initial-scale='+iScale+',minimum-scale='+iScale+',maximum-scale='+iScale+',user-scalable=no" />')
		var iWidth = document.documentElement.clientWidth;
		document.getElementsByTagName('html')[0].style.fontSize = iWidth / 16 + 'px';
	</script>
	<style>
		* {
			margin: 0;
			padding: 0;
		}
		body,html {
			position: relative;
			overflow: hidden;
			height: 100%;
		}
		ul {
			margin: 0;
			padding: 0;
			list-style-type: none;
		}
		header {
			height: 2rem;
			background: #000;
			line-height: 2rem;
			color: #fff;
			font-size: .8rem;
			text-align: center;
			position: relative;
		}
		#box ,.imgWrap {
			position: absolute;
			top: 2rem;
			left: 0;
			bottom: 0;
			width: 100%;
			overflow: hidden;
		}
		#list {
			overflow: hidden;
		}
		#list li {
			width: 7rem;
			height: 7rem;
			float: left;
			margin: .5rem;
			background: url('img/loading.gif') center center no-repeat;
		}
		#list img {
			display: block;
			width: 100%;
			opacity: 0;
			transition: 2s;
		}
		#imgPage {
			position: absolute;
			left: 0;
			bottom:0;
			top: 0;
			right:0;
			background: #ccc;
			-webkit-transform :scale(0);
			transform: scale(0);
		}
		#bigImg {
			position: absolute;
			width: 13rem;
			height: 10rem;
			left: 3rem;
			top: 50%;
			margin-top: -5rem;
			margin-left: -1.5rem;
		}
		#backBtn {
			text-decoration: none;
			width: 2rem;
			height: 2rem;
			position: absolute;
			left: 0;
			top: 0;
			color:#fff;
			font-size: 1.6rem;
			text-align: center;
			font-weight: bold;
			line-height:2rem;
		}
		#imgNavs {
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			height: 2rem;
			background: #fff;
		}
		#imgNavs a {
			text-decoration: none;
			float: left;
			width: 4rem;
			font-size: .6rem;
			text-align: center;
			color: #000;
			line-height: 2rem;
			border: 1px solid #ccc;
			box-sizing: border-box;
		}
		#inner {
			position: relative;
		}
		#inner footer {
			position: absolute;
			left: 0;
			right: 0;
			bottom:-2rem;
			height: 2rem;
			line-height: 2rem;
			text-align: center;
			font-size: .8rem;
			opacity: 0;
		}
	</style>
</head>
<body>
	<header>技术进</header>
	<div id="box">
		<div id="inner">
			<ul id="list"></ul>
			<footer>加载更多...</footer>
		</div>
	</div>
	<section id="imgPage">
		<header>大图预览<a href="javascript:;" id="backBtn"><</a></header>
		<div class="imgWrap">
			<img src="img/1.png" id="bigImg">
			<nav id="imgNavs">
				<a href="javascript:;">向左旋转90度</a>
				<a href="javascript:;">向右旋转90度</a>
				<a href="javascript:;">放大</a>
				<a href="javascript:;">缩小</a>
			</nav>
		</div>
	</section>

	<script>
		// document.addEventListener('touchstart',function(e){
		// 	e.preventDefault();
		// },{ passive: false });
		var box = document.querySelector('#box');
		var imgPage = document.querySelector('#imgPage');
		var bigImg = document.getElementById('bigImg');
		(function(){
			var list = document.querySelector('#list');
			var inner = document.querySelector('#inner');
			var footer = document.querySelector('footer');
			var lis = list.children;
			var dataImg = [];
			var length = 8;
			var start = 0;
			var isEnd = false;
			for(var i=0;i<30;i++){
				dataImg.push('img/'+(i % 10 + 1)+'.png');
			}
			setBigImg();
			setScroll();
			createLi();
			function createLi(){
				if(start >= dataImg.length){
					footer.innerHTML = '没了,还拉~~~~';
					MTween({
						el : inner,
						target : {translateY : box.clientHeight -  inner.offsetHeight},
						time : 300,
						type : "easeBoth"
					});
					return;
				}
				var end = start + length;
				end = end>dataImg.length ? dataImg.length : end;
				for(var i = start;i<end;i++){
					var li = document.createElement('li');
					li.src = dataImg[i];
					li.isLoad = true;
					li.addEventListener('touchstart',function(e){
						this.isMove = false;
					});
					li.addEventListener('touchmove',function(e){
						this.isMove = true;
					});
					li.addEventListener('touchend',function(e){
						if(!this.isMove){
							css(bigImg,'scale',100);
							css(bigImg,'rotate',0);
							bigImg.src = this.children[0].src;
							css(imgPage,'scale',100);
						}else {
							return;
						}
					});
					list.appendChild(li);
				}
				createImg();
				footer.style.opacity = 0;
			}
			function createImg(){
				var boxRect = box.getBoundingClientRect();
				var bottom = boxRect.top + boxRect.height;
				for(var i=0;i<lis.length;i++){
					//li相对于 可视区的top值
					var top = lis[i].getBoundingClientRect().top;
					if(top <bottom && lis[i].isLoad){
						lis[i].isLoad = false;
						showImg(lis[i]);
					}
				}
			}
			function showImg(li){
				var img = new Image();
				img.src = li.src;
				img.onload = function(){
					li.appendChild(img);
					setTimeout(function(){
						img.style.opacity = 1;
					},30);
				}
			}
			function setScroll(){
				mScroll({
					el : box,
					start : function (e){
						var innerTop = Math.round(css(inner,'translateY')) - 5;
						var minTop = box.clientHeight - inner.clientHeight;
						if(minTop >=innerTop){
							footer.style.opacity = 1;
							isEnd = true;
						}else {
							footer.style.opacity = 0;
							isEnd = false;
						}
					},
					move : function(){
						createImg();
					},
					end : function(){
						var innerTop = Math.round(css(inner,'translateY')) - 5;
						var minTop = box.clientHeight - inner.clientHeight;
						if(isEnd && minTop >=innerTop){
							clearInterval(inner.timer);
							start +=length;
							createLi();
							isEnd = false;
						}
					},
					over : function(){
						//
					}
				});
			}
		})();
		function setBigImg(){
			var navs = document.querySelector('#imgNavs a');
			var backBtn = document.querySelector('#backBtn');
			var startScale = 0;
			var startRotate = 0;
			var maxScale = 1.5;
			var minScale = .5;
			css(imgPage,"scale",0);
			backBtn.addEventListener('touchend',function(e){
				css(imgPage,"scale",0);
			});
			setGesture({
				el:bigImg,
				start : function(e){
					startScale = css(box,'scale')/100;
					startRotate = css(box,'rotate');
				},
				change :function(e){
					var scale = e.scale*startScale;
					if(scale >= maxScale){
						scale = maxScale;
					}else if(scale <= minScale){
						scale = minScale;
					}
					css(box,'scale',scale*100);
					css(box,'rotate',e.rotation+startRotate);
				},
				end :function(e){
					var deg = css(this,'rotate');
					deg = Math.round(deg/90);
					deg = deg * 90;
					MTween({
						el:this,
						target : {rotate:deg},
						time : 300,
						type :"easeBoth"
					});
				}
			});
			// navs[2].addEventListener('touchend',function(e){
			// 	var scale = css(bigImg,'scale')/100;
			// 	scale += .1;
			// 	if(scale >maxScale){
			// 		scale = maxScale;
			// 	}
			// 	MTween({
			// 		el:bigImg,
			// 		target : {scale:scale},
			// 		time : 300,
			// 		type :"easeBoth"
			// 	});
			// });
			// navs[3].addEventListener('touchend',function(e){
			// 	var scale = css(bigImg,'scale')/100;
			// 	scale -= .1;
			// 	if(scale < minScale){
			// 		scale = minScale;
			// 	}
			// 	MTween({
			// 		el:bigImg,
			// 		target : {scale:scale},
			// 		time : 300,
			// 		type :"easeBoth"
			// 	});
			// });
			// navs[0].addEventListener('touchend',function(e){
			// 	var deg = css(bigImg,'rotate');
			// 	deg = Math.round(deg/90) +1;
			// 	deg = deg * 90;
			// 	MTween({
			// 		el:bigImg,
			// 		target : {rotate:deg},
			// 		time : 300,
			// 		type :"easeBoth"
			// 	});
			// });
			// navs[1].addEventListener('touchend',function(e){
			// 	var deg = css(bigImg,'rotate');
			// 	deg = Math.round(deg/90) - 1;
			// 	deg = deg * 90;
			// 	MTween({
			// 		el:bigImg,
			// 		target : {rotate:deg},
			// 		time : 300,
			// 		type :"easeBoth"
			// 	});
			// });
		}
	</script>
</body>
</html>
